<script lang="ts" setup>
import { emitter } from "@/utils/mitt"; // 组件通讯
const input = ref("");
// Store
import { useCanvasStoreHook } from "@/stores/modules/canvas"; // 画布
import { filter } from "lodash-es";

const useCanvasStore = useCanvasStoreHook(); // 画布
const usetags = computed(() => {
  return useCanvasStore.getStatistics(true).map((item) => {
    item.isCheck = true;
    return item;
  });
});
const usetagEdges = computed(() => {
  return useCanvasStore.getEdgesByNum(true).map((item) => {
    item.isCheck = true;
    return item;
  });
});

const tags = ref();
const tagEdges = ref();
watch(
  () => [usetags, usetagEdges],
  () => {
    // console.log(222);
    tags.value = usetags.value;
    tagEdges.value = usetagEdges.value;
  },
  {
    immediate: true,
    deep: true,
  }
);

const relation = reactive({
  checkAll: true,
  // isIndeterminate: false,
});

const entity = reactive({
  checkAll: true,
  // isIndeterminate: false,
});

const handleTagEdgesChange = () => {
  relation.checkAll = tagEdges.value.every((ele) => ele.isCheck);

  // if (relation.checkAll) {
  //   relation.isIndeterminate = false;
  // } else {
  //   relation.isIndeterminate = tagEdges.value.some((ele) => ele.isCheck);
  // }

  emitter.emit("handleFiltersEdges", tagEdges.value);
};

const handleAllTagEdgesChange = (val) => {
  // relation.isIndeterminate = false;
  tagEdges.value.forEach((item) => {
    item.isCheck = val;
  });

  emitter.emit("handleFiltersEdges", tagEdges.value);
};

const handleTagChange = () => {
  entity.checkAll = tags.value.every((ele) => ele.isCheck);
  // if (entity.checkAll) {
  //   entity.isIndeterminate = false;
  // } else {
  //   entity.isIndeterminate = tags.value.some((ele) => ele.isCheck);
  // }

  emitter.emit("handleFiltersNodes", tags.value);
};

const handleAllTagChange = () => {
  // entity.isIndeterminate = false;
  tags.value.forEach((item) => {
    item.isCheck = entity.checkAll;
  });

  emitter.emit("handleFiltersNodes", tags.value);
};

/** 过滤 */
const filterFn = () => {
  if (input.value) {
    tagEdges.value = tagEdges.value.filter(
      (item) => item.name.indexOf(input.value) > -1
    );
    tags.value = tags.value.filter(
      (item) => item.name.indexOf(input.value) > -1
    );
  } else {
    tagEdges.value = usetagEdges.value;
    tags.value = usetags.value;
  }
};
</script>

<template>
  <div>
    <div>
      <el-input v-model="input" placeholder="输入要过滤的关键字">
        <template #append>
          <el-button
            class="!bg-[#2B1DFF] !text-[#FFFFFF]"
            type="primary"
            @click="filterFn"
          >
            过滤
          </el-button>
        </template>
      </el-input>
    </div>
    <div class="mt-[16px]">
      <div class="list">
        <span>
          <el-checkbox
            v-model="relation.checkAll"
            @change="handleAllTagEdgesChange"
          >
            全部关系
          </el-checkbox>
        </span>
        <ul>
          <li v-for="(item, index) in tagEdges" :key="index">
            <el-checkbox
              v-model="item.isCheck"
              @change="handleTagEdgesChange(item)"
            >
              {{ item.name }}
            </el-checkbox>
            <!--            <i class="iconfont icon_file_fill text-[#7F8A9B]"></i>-->
          </li>
        </ul>
      </div>
      <div class="list">
        <span>
          <el-checkbox v-model="entity.checkAll" @change="handleAllTagChange">
            全部实体
          </el-checkbox>
        </span>
        <ul>
          <li v-for="(item, index) in tags" :key="index">
            <el-checkbox v-model="item.isCheck" @change="handleTagChange(item)">
              {{ item.name }}
            </el-checkbox>
            <!--            <i class="iconfont icon_file_fill text-[#7F8A9B]"></i>-->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list {
  width: 100%;

  > span {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    background: #f7f8fa;
  }

  > ul {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 8px;
    padding-left: 32px;

    > li {
      display: flex;
      align-items: center;

      > i {
        margin-left: 8px;
      }
    }
  }
}
</style>
